<template>
  <div class="block feed m-b p-b">
    <div class="p row">

      <div class="avatar" :style="{'background-image':'url('+getUserInfo(product).avatar+')'}"></div>

      <div class="user">
        <div class="nickname">{{getUserInfo(product).nickname||'未知用户'}}&nbsp;<span v-if="isShow(feed)">{{" | "}}</span>&nbsp;<span
          :style="{'color': '#979797'}">{{getCompanyName(feed)}}</span></div>
        <div class="time">{{product.created}}</div>
      </div>
    </div>
    <div class=" p-h content">
      <p>{{product.title}}</p>
      <p>{{product.content}}</p>
    </div>

    <template v-if="product.images&&product.images.length>0">
      <div class="gallery">
        <div v-for="pic in product.images" class="img" @click.stop="goToBrowser(product,$index)"
             :style="{height:getFeedsImgLen(product)+'px',width:getFeedsImgLen(product)+'px','margin-right':isRightSide(product,$index)?'':'2px','background-image':'url('+processImgUrl(product,pic)+')','background-size': 'cover'}"></div>
      </div>
    </template>

    <div class="tags p-h" v-if="product.tag">
      <div class="tag" v-for="tag of getTags(product)">{{tag}}</div>
    </div>
  </div>
</template>

<script type="text/babel">
  import feeds from '../api/feeds'

  export default{
    props: ['product', 'userInfo'],
    data (){
      return {}
    },
    methods: {
      processImgUrl(product, url){

        url += '?imageView2/1/w/' + Math.floor(this.getFeedsImgLen(product) * 1.5) + '/format/jpg/interlace/1';

        return url;
      },

      goToBrowser(product, index){
        wsdk.go({url: 'browser', type: pageType.NATIVE, params: {urls: product.images, index: index}});
      },

      getUserInfo(product){
        if (this.userInfo)
          return this.userInfo;
        else if (product.userInfo)
          return product.userInfo;
        return {};
      },

//      goToDetail(product){
//        wsdk.go({url: 'feedDetail', type: pageType.NATIVE, params: {feedId: product._id}});
//      },

      getTags(product){
        return product.tag.split('#');
      },

      like(product){
        if (!product.liked) {
          feeds.like(product._id).then((res)=> {
            if (res.code == 0) {
              wsdk.toast('点赞成功！');
            } else {
              console.log(res.msg);
              res.msg && wsdk.toast(res.msg);
            }
          });
        }
      },

      getCompanyName(product){
        var user = this.getUserInfo(product);
        if (user.company && user.company._id)
          return user.company.name;
      },

      rowsCount: function (product) {
        var count = product.images.length;

        return Math.ceil(count / this.columnCount(product));
      },

      columnCount: function (product) {
        var count = product.images.length;

        if (count == 1)
          return 1;

        if (count == 2 || count == 4)
          return 2;

        return 3;
      },

      getFeedsImgLen: function (product) {
        var space = 2;
        var totalLen = document.body.clientWidth;
        var count = product.images.length;
        if (count == 1)
          return Math.floor(totalLen);

        if (count >= 2 && count <= 4)
          return (totalLen - space) / 2;

        return (totalLen - space * 2) / 3;

      },

      isRightSide(product, index){
        var count = product.images.length;

        index++;

        if (count == 1)
          return true;

        if (count >= 2 && count <= 4)
          return index % 2 == 0;

        return index % 3 == 0;
      },

      isShow(product){
        var user = this.getUserInfo(product);
        return user.company && user.company._id && user.company.name;
      }
    }
  }
</script>

<style scoped>
  .img {
    background-color: #f5f5f5;
    margin-bottom: 2px;
  }

  .avatar {
    margin-right: 5px;
  }

  .nickname {
    margin-bottom: 5px;
  }

  .content {
    margin-bottom: 15px;
  }

  .user {
    width: calc(100% - 65px);
  }
</style>
